<template>
  <div class="_wz_boardMain">
    <div class="_wz_boardMain_video">
      <video style="width: 100%; height: 100%; object-fit: cover;filter: blur(8px);"  x5-video-player-type="h5"  webkit-playsinline="true"  src="../../assets/bgMp5.mp4" playsinline="true" autoplay loop muted />
    </div>
    <div class="_wz_boardMain_conent">
      <div class="_wz_boardMain_conent_head">

        <div class="_wz_boardMain_conent_head_left">
          <template v-for="(item,index) in navList">
            <template v-if="(parseInt(navList.length / 2) + ( navList.length % 2)) > index">
              <template v-if="item.menuUrl == 'dynamicVehicle' || item.menuUrl == 'operationalAnalysis' || item.menuUrl == backgroundHomepage">
                <div class="_wz_boardMain_menu_list" @click="selectMenu(item)" :class="{'_wz_boardMain_menu_listSelect' : action == item.menuUrl}" :style="{left:(index * -20) + 'px'}">{{item.name}}</div>
              </template>
              <template v-else>
                <div class="_wz_boardMain_menu_list _wz_menu_prohibitprohibit" @click="selectMenu(item)" :class="{'_wz_boardMain_menu_listSelect' : action == item.menuUrl}" :style="{left:(index * -20) + 'px'}">{{item.name}}</div>
              </template>
            </template>
          </template>
        </div>
        <div class="_wz_boardMain_conent_head_middle">
          <div class="_wz_boardMain_conent_head_logo">
            <img src="../../assets/logo.png" style="height: 40px;"/>
            <div>
              {{ !!userData.userInfo && !!userData.userInfo.deptName ? userData.userInfo.deptName : ''}}交通运输综合监测平台
            </div>
          </div>
        </div>
        <div class="_wz_boardMain_conent_head_right">
          <template v-for="(item,index) in navList">
            <template v-if="(parseInt(navList.length / 2) + ( navList.length % 2)) <= index">
              <template v-if="item.menuUrl == 'dynamicVehicle' || item.menuUrl == 'operationalAnalysis' || item.menuUrl == backgroundHomepage">
                <div class="_wz_boardMain_menu_list _wz_boardMain_menu_list1" @click="selectMenu(item)" :class="{'_wz_boardMain_menu_listSelect1' : action == item.menuUrl}" :style="{right:((navList.length - index - 1) * -20) + 'px'}">{{item.name}}</div>
              </template>
              <template v-else>
                <div class="_wz_boardMain_menu_list _wz_boardMain_menu_list1 _wz_menu_prohibitprohibit" @click="selectMenu(item)" :class="{'_wz_boardMain_menu_listSelect1' : action == item.menuUrl}" :style="{right:((navList.length - index - 1) * -20) + 'px'}">{{item.name}}</div>
              </template>
            </template>
          </template>
        </div>


      </div>
      <div style="height: calc(100% - 60px);">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import dayjs from "dayjs";
import {getMenu} from "@/util/getMenu";
import {getFirstMenu} from "@/router/dynamicRouting";
import ViewUIPlus from "view-ui-plus";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex




//reactive
export default defineComponent({
  name: 'boardMain',//组件名称
  components: {
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $dayjs = inject('$dayjs');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      userData:{},
      navList:[
        {name:'综合监测',id:'comprehensiveMonitoring'},
        {name:'安全生产',id:'safeProduction'},
        {name:'动态车辆',id:'dynamicVehicle'},
      ],
      action:'',//选中菜单
      timeObj:{},

      backgroundHomepage:'',//后台首页



    });

    //菜单选中
    const selectMenu = (data)=>{
      if(data.menuUrl == 'dynamicVehicle' || data.menuUrl == 'operationalAnalysis' || data.menuUrl == state.backgroundHomepage){
        state.action = data.menuUrl;
        router.push({ path: state.action, query: {}})
      }else{
        ViewUIPlus.Message.warning({content: "功能升级开发中，尽情期待！！",});
      }
    }

    //获取时间展示
    const getTimeShow = ()=>{
      setInterval(()=>{
        timeCalculation();
      },1000)
    }

    //时间计算
    const timeCalculation = ()=>{
      var date = new Date();
      var yy = date.getFullYear();
      var mm = date.getMonth() + 1;
      var dd = date.getDate();
      var data = $common.calendar.solar2lunar(yy, mm, dd)
      data.time = $dayjs().format('YYYY-MM-DD HH:mm:ss')
      state.timeObj = data;
    }


    //页面初始化
    const loadInit = async()=>{
      let navList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => item.menuHide)[0].children;
      state.backgroundHomepage =  await getFirstMenu((JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide))
      let managementPlatform = {
        name:'前往后台',
        menuUrl:state.backgroundHomepage
      };//管理后台地址
      state.navList = [...navList,managementPlatform]
      state.action = !!router.currentRoute.value.name ? router.currentRoute.value.name : state.navList[0].menuUrl


      getTimeShow();
      timeCalculation();

    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      state.userData = JSON.parse(sessionStorage.getItem("loginData"))
      loadInit()

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      selectMenu,//菜单选中
    }
  }
})


</script>
<style lang="less">
._wz_boardMain{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  background: #000;
  ._wz_boardMain_video{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  ._wz_boardMain_conent{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    ._wz_boardMain_conent_head{
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      color: #fff;
      position: relative;
      background: url(../../assets/head3.png) no-repeat;
      background-size: 80% 90%;
      background-position: center;
      ._wz_boardMain_conent_head_left{
        width: 33%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        position: relative;
        top: 6px;
      }
      ._wz_boardMain_conent_head_middle{
        width: 34%;
        ._wz_boardMain_conent_head_logo{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          height: 50px;
          div{
            margin: 0 0 0 10px;
            letter-spacing: 6px;
            font-size: 26px;
          }
        }
      }
      ._wz_boardMain_conent_head_right{
        width: 33%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        position: relative;
        top: 6px;
      }

      ._wz_boardMain_menu_list{
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        width: 180px;
        height: 50px;
        text-align: center;
        letter-spacing: 1px;
        background-image: url(../../assets/menus3.png);
        background-size: 100% 100%;
        position: relative;
        line-height: 40px;

      }
      ._wz_boardMain_menu_list:hover{
        background-image: url(../../assets/menusSelect3.png);
      }
      ._wz_boardMain_menu_listSelect{
        background-image: url(../../assets/menusSelect3.png);
      }


      ._wz_boardMain_menu_list1{
        background-image: url(../../assets/menus4.png);
      }

      ._wz_boardMain_menu_list1:hover{
        background-image: url(../../assets/menusSelect4.png);
      }
      ._wz_boardMain_menu_listSelect1{
        background-image: url(../../assets/menusSelect4.png);
      }
    }

  }

  ._wz_menu_prohibitprohibit{
    position: relative;
    //filter: blur(8px);
    filter: grayscale(100%);
  }
  //._wz_menu_prohibitprohibit:before {
  //  content: "开发中";
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  font-size: 8px;
  //  transform: scale(0.8);
  //}

}
</style>
